<template>
  <div class="faxian">
    <!-- mes控制输入框，rig里面的内容为图标样式，title为标题 bgc为背景颜色，如想透明就为0，否则为1
    mes不为空就不显示文本框   rig里面写图标的具体样式
    title为标题的内容 -->

    <Head mes="0"
          rig=""
          title="发现"
          bgc="1" />

    <div class="cont_body">
      <div class="topic">
        <h2>热门话题</h2>
        <div>
          <div class="slide">
            <Hot_topic />
            <Hot_topic />
            <Hot_topic />
            <Hot_topic />
            <Hot_topic />
          </div>
        </div>
      </div>
      <h2>热门资讯</h2>
      <div class="box_yd">
        <div class="box">
          <ul>
            <li v-for="(value, index) in school"
                :key="value.id">
              <div @click="tiao(value.id)">
                <div class="cont_leftimg">
                  <img :src="value.url"
                       alt="" />
                </div>
                <div class="cont_righttxt">
                  <div>
                    <p>【暑期7天8夜中国抱团旅游】{{ value.title }}</p>
                    <span>B站{{ value.username }}</span>
                  </div>
                  <div>
                    <span class="el-icon-view">140</span>
                    <span class="el-icon-chat-dot-round">22</span>
                    <span class="el-icon-star-off"
                          :class="{ sc: value.state == 1 }"
                          @click="qiehuan(index)">12</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <Foot num="2" />
  </div>
</template>
<script>
import Head from "../../components/Head.vue";
import Foot from "../../components/Foot.vue";
import Hot_topic from "../../components/Faxian/Hot_topic.vue";

export default {
  name: "faxian",
  components: {
    Head,
    Foot,
    Hot_topic,
  },
  data () {
    return {
      school: [],
    };
  },
  methods: {
    qiehuan (index) {
      console.log(this.school[index].state);
      this.school[index].state = !this.school[index].state;
      console.log(this.school[index].state);
      this.ajax({
        method: "post",
        url: "/updateSta",
        data: {
          id: this.school[index].id,
          state: this.school[index].state,
        },
      }).then((res) => {
        console.log(res);
      });
    },
    tiao(value){
      this.$store.commit("gaiid", value);
      this.$router.push({ name: "Mudidi" });
    }
  },
  mounted () {
    this.ajax({
      method: "get",
      url: "/queryAll",
    }).then((res) => {
      this.school = res.data;
      // console.log(this.dataA);
    });
  },
};
</script>

<style lang="scss" scoped>
.box_yd {
  overflow: scroll;
}
.topic {
  > div {
    width: 100%;
    overflow: scroll;
    .slide {
      width: 180%;
      display: flex;
    }
  }
}
.sc {
  color: orange;
}
.cont_body {
  box-shadow: -2px 0px 3px 1px gray;
  padding: 10px;
  height: 750px;
  margin-top: 3px;
  overflow: scroll;

  h2 {
    color: #333333;
    font-family: "黑体";
    margin-top: 10px;
  }
  .box_yd {
    > .box {
      height: 750px;

      > ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 5px;
        > li {
          margin-bottom: 15px;
          width: 355px;

          > div {
            width: 100%;
            height: 120px;
            border-radius: 5px;
            display: flex;
            background-color: #ffffff;
            box-shadow: 0px 2px 5px rgba(59, 59, 59, 0.438);
            box-sizing: border-box;

            > .cont_leftimg {
              width: 160px;
              height: 120px;
              border-radius: 5px;
              > img {
                width: 160px;
                height: 120px;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
              }
            }
            > .cont_righttxt {
              width: 220px;
              height: 120px;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              > div:nth-of-type(1) {
                > p {
                  margin-left: 10px;
                  margin-bottom: 10px;
                }
                > span {
                  margin-left: 15px;
                }
              }
              > div:nth-of-type(2) {
                margin-left: 15px;
                > span {
                  margin-right: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>